<template>
  <div style="height:100%;width:100% ;padding-top: 58px;" class="topBox">
    <el-col :span="16">
      <div class="div-left">
        <span class="demonstration">时间</span>
        <el-date-picker
          style="margin-left: 14px;"
          v-model="timePeopleValue"
          type="month"
          @change="selectPeopleTime"
          value-format="yyyy-MM"
          placeholder="选择月"
        >
        </el-date-picker>
        <el-button size="mini" type="primary" @click="exportToPDF">导出图表
        </el-button>
      </div>
    </el-col>

    <el-col :span="16">
      <div style="height:100%;width:100%" class="container">
        <div id="peopleChart" :style="{ width: '700px', height: '500px' }"></div>
      </div>
    </el-col>


    <!-- 个人月度系数分布图 -->
    <el-col :span="16" v-show="showMonthlyChart">
      <div style="height:100%;width:100%">
        <div id="copChart1" :style="{ width: '750px', height: '500px' }"></div>
      </div>
    </el-col>
  </div>


</template>

<script>
  import axios from 'axios'
  import html2pdf from 'html2pdf.js'

  export default {
    data() {
      return {
        timePeopleValue: '',
        peopleDeptName: '',
        userName: '',
        showMonthlyChart: false

      }
    },
    created() {
      // 折线图
      var today = new Date ()
      var year = today.getFullYear ()//获取年份
      var month = today.getMonth () + 1//获取月份
      var monthOne = (month < 10) ? ('0' + month) : month
      this.timePeopleValue = year + '-' + monthOne
      if (this.$route.query.deptName) {
        var deptName = this.$route.query.deptName
        this.selectPeople (deptName)
      }

    },
    methods: {
      selectPeople(deptName) {
        this.peopleDeptName = deptName
        this.selectPeopleScone (this.timePeopleValue, this.peopleDeptName)
      },
      selectPeopleScone(val, deptName) {
        axios ({
          data: {
            'date': val,
            'deptName': deptName
          },
          method: 'post',
          url: '/hr-xc-human-resources-perform-manage/generator/performanceappraisal/queryFractionByDeptName'
        }).then (({ data }) => {
            if (data !== null) {
              this.peopleDrawLine (data.x, data.y)
            } else {
              this.$message.error ('其他月份目前没有！')
            }
          }
        ).catch(error => {
          this.$message.error ('服务器访问异常，请从新登录')
        });
      },
      selectCop(x, y) {
        this.$nextTick (() => {
          var myChart = this.$echarts.init (document.getElementById ('copChart1'))
          var option = {
            title: {
              text: '个人月度系数分布图',
              left: 'center'
            },
            xAxis: {
              type: 'category',
              data: x,
              axisLabel: {
                //  X 坐标轴标签相关设置
                interval: 0,
                rotate: '45'
              }
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: y,
                type: 'line',
                barWidth: 30,
                itemStyle: {
                  color: 'red'
                }
              }
            ],
            toolbox: {//echart保存为图片
              show: true,
              feature: {
                mark: {
                  show: true
                },
                restore: {
                  show: true
                },
                saveAsImage: {
                  show: true,
                  pixelRatio: 1,
                  title: '保存为图片',
                  type: 'png',
                  lang: ['点击保存']
                }
              }
            }
          }
          myChart.setOption (option)

        })
      },
      // 部门
      peopleDrawLine(x, y) {
        this.$nextTick (() => {
          // 基于准备好的dom，初始化echarts实例
          var myChart = this.$echarts.init (document.getElementById ('peopleChart'))
          // 指定图表的配置项和数据
          var option = {
            title: {
              text: '当前部门人员系数分布图',
              left: 'center'
            },
            tooltip: {},
            legend: {
              data: ['系数'],
              orient: 'vertical',
              right: 60,
              y: 'top'
            },
            xAxis: {
              data: x,
              axisLabel: {
                //  X 坐标轴标签相关设置
                interval: 0,
                rotate: '25'
              }
            },
            yAxis: {},
            series: [{
              name: '系数',
              type: 'bar',
              data: y,
              barWidth: 30,
              itemStyle: {
                color: '#2f9891'
              }
            }],
            toolbox: {//echart保存为图片
              show: true,
              feature: {
                mark: {
                  show: true
                },
                restore: {
                  show: true
                },
                saveAsImage: {
                  show: true,
                  pixelRatio: 1,
                  title: '保存为图片',
                  type: 'png',
                  lang: ['点击保存']
                }
              }
            }
          }
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption (option)
          //防止重复触发点击事件
          if (myChart._$handlers.click) {
            myChart._$handlers.click.length = 0
          }
          var _this = this
          myChart.on ('click', function(params) {
            //这个params可以获取你要的饼图中的当前点击的项的参数
            _this.userDeptScone (params.name)
          })
        })
      },
      selectPeopleTime(val) {
        this.selectPeopleScone (val, this.peopleDeptName)
        this.showMonthlyChart = false
      },
      // 查询人员近一年的得分
      userDeptScone(userName) {
        this.showMonthlyChart = true
        axios ({
          data: {
            'deptName': this.peopleDeptName,
            'userName': userName,
            'date': this.timePeopleValue
          },
          method: 'post',
          url: '/hr-xc-human-resources-perform-manage/generator/performanceappraisal/queryFractionByUserName'
        }).then (({ data }) => {
            if (data !== null) {
              this.selectCop (data.x, data.y)
            } else {
              this.$message.error ('其他月份目前没有！')
            }
          }
        ).catch(error => {
          this.$message.error ('服务器访问异常，请从新登录')
        });
      },

      // 导出pdf
      exportToPDF() {
        const element = document.querySelector ('.container')

        html2pdf (element, {
          margin: 1,
          filename: 'dashboard.pdf',
          image: { type: 'jpeg', quality: 0.98 },
          html2canvas: { dpi: 192, letterRendering: false },
          jsPDF: { unit: 'pc', format: 'a4', orientation: 'portrait' },
          viewport: 'a4' // 设置画布大小为 A4
        })
      }

    }
  }
</script>
<style scoped>
  .div-left {
    margin-left: 30px;
  }


  .search-form {
    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    padding-top: 58px;
    padding-left: 5px;
    margin-bottom: 10px;
    background: #fff
  }

  button {
    width: 120px;
    height: 32px;
    margin: 10px 30px 20px 38px;
  }

  .container {
    box-sizing: border-box;
    padding: 120px 30px 0 30px;
  }
</style>
